import React from "react"
import { TabBar } from 'antd-mobile';
import Discover from "./pages/Discover"
import My from "./pages/My"
import Cloud from "./pages/Cloud"
import Info from "./pages/Info"
import Video from "./pages/Video"
//引入路由
import { Route } from "react-router-dom"

class Tab_bar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: '/discover',
            hidden: false,
            fullScreen: true,
        };
    }
    renderContent(location) {
        let { pathname } = location
        this.setState({
            selectedTab: pathname
        })
    }
    componentDidMount() {
        this.renderContent(this.props.location)
    }
    componentWillReceiveProps(nextProps) {
        this.renderContent(nextProps.location)
    }
    render() {
        // console.log(this.props)
        return (
            <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0,zIndex:-1} : { height: 400 }}>
                <TabBar
                    unselectedTintColor="#d81e06"
                    tintColor="#000000"
                    barTintColor="white"
                    hidden={this.state.hidden}
                >
                    <TabBar.Item
                        title="发现"
                        key="discover"
                        icon={<div style={{
                            width: '22px',
                            height: '22px',
                            background: 'url('+require("../src/static/icon/wangyi.png")+') center center /  21px 21px no-repeat'
                        }}
                        />
                        }
                        selectedIcon={<div style={{
                            width: '22px',
                            height: '22px',
                            background: 'url('+require("../src/static/icon/wangyi1.png")+') center center /  21px 21px no-repeat'
                        }}
                        />
                        }
                        selected={this.state.selectedTab === '/discover'}
                        ome
                        onPress={() => {
                            this.props.history.push("/discover")
                            this.setState({
                                selectedTab: '/discover',
                            });
                        }}
                        data-seed="logId"
                    >
                        <Route path="/discover" component={Discover} />
                        <Route path="/" exact component={Discover} />
                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url('+require("../src/static/icon/video.png")+') center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url('+require("../src/static/icon/video1.png")+') center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        title="视频"
                        key="video"
                        selected={this.state.selectedTab === '/video'}
                        onPress={() => {
                            this.props.history.push("/video")
                            this.setState({
                                selectedTab: '/video',
                            });
                        }}
                        data-seed="logId1"
                    >
                        <Route path="/video" component={Video} />
                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url('+require("../src/static/icon/music.png")+') center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url('+require("../src/static/icon/music1.png")+') center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        title="我的"
                        key="my"
                        selected={this.state.selectedTab === '/my'}
                        onPress={() => {
                            this.props.history.push("/my")
                            this.setState({
                                selectedTab: '/my',
                            });
                        }}
                    >
                        <Route path="/my" component={My} />
                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url('+require("../src/static/icon/cloud.png")+') center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url('+require("../src/static/icon/cloud1.png")+') center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        title="云村"
                        key="cloud"
                        selected={this.state.selectedTab === '/cloud'}
                        onPress={() => {
                            this.props.history.push("/cloud")
                            this.setState({
                                selectedTab: '/cloud',
                            });
                        }}
                    >
                        <Route path="/cloud" component={Cloud} />
                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url('+require("../src/static/icon/head.png")+') center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url('+require("../src/static/icon/head1.png")+') center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        title="账号"
                        key="info"
                        selected={this.state.selectedTab === '/info'}
                        onPress={() => {
                            this.props.history.push("/info")
                            this.setState({
                                selectedTab: '/info',
                            });
                        }}
                    >
                        <Route path="/info" component={Info} />
                    </TabBar.Item>
                </TabBar>
            </div>
        );
    }
}

export default Tab_bar